<template>
  <div>
    <div class="table-box">

        <div class="search" ref="search">
            <div class="search-main" v-if="searchOperate">
                <!-- <div style="justify-content: space-between;display: flex;">
                    

                </div> -->
                <div class="search-input">

                    <div  class="search-item"  v-for="(item,index) in searchOperate.condition" :key="index">
                        <!-- 输入框 -->
                        <div class="label">{{ item.label }}</div>
                        <el-input 
                        size="medium"
                        v-if="item.type==='input'" 
                        :style="{'width':item.width}"
                        type="text" 
                        :placeholder="item.prompt" 
                        v-model="searchOperate.entity[item.name]"
                        />
                        
                    
                        <!-- 选择框 -->

                        <!-- 时间范围选择框 -->

                        <!-- 日期范围选择框 -->

                        <!-- 数值范围选择框 -->

                    </div>

                </div>
                
                
                
               <div class="search-btn-main">

                    <el-button size="medium" type="primary" icon="el-icon-search" @click="searchOperateHandler(1,page.size?page.size:10)">搜索</el-button>

                </div>
                
            </div>
        </div>

        <div class="global" >
            <div class="global-main" v-if="globalOperate">
                
                <div class="global-item-left" >
                    <div class="global-item-left-btn" v-for="(operate,index) in globalOperate.left" :key="index">
                        
                        <el-button
                        :icon="operate.icon"
                        size="medium" 
                        :type="operate.level"  
                        @click="globalOperateHandler({operate})"
                        >
                            {{ operate.text }}
                        </el-button>

                    </div>
                        
                </div>

                <div class="global-item-right" >
                    <div class="global-item-right-btn" v-for="(operate,index) in globalOperate.right" :key="index">
                        <el-button
                        :icon="operate.icon"
                        size="medium" 
                        :type="operate.level" 
                        @click="globalOperateHandler({operate})"
                        >
                            {{ operate.text }}
                        </el-button>
                    </div>
                    
                </div>
            

            </div>
        </div>

        <div class="table-mian">
            <div style="width: 96%;" v-if="config">
                <el-table
               
                :data="page.records"
                style="width: 100%"
                lazy
                :max-height="400"
                :height="tableHeight"
                border
                empty-text="暂无数据~"
                :tree-props="config.treeProps"
                :row-key="config.rowKey"
                :load="config.load"
                >
                    <el-table-column
                    
                    :fixed="item.fixed"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    v-show="item.show"
                    show-overflow-tooltip
                    v-for="(item,index) in config.columns" :key="index"
                    >
                    <!-- <template slot-scope="scope">
                        <div style="overflow:hidden;text-overflow:ellipsis;white-space: nowrap;justify-content: start;display: flex;">
                            <slot>{{ scope.row[item.prop] }}</slot>
                            <slot :name="item.prop" :param="scope"></slot>
                        </div>

                    </template> -->
                    
                    </el-table-column>
                    <el-table-column label="操作" :fixed="'right'" :width="200">
                        <!-- 操作 -->
                    <template slot-scope="scope">
                        <el-button
                        :style="{'color': operate.color}"
                        :type="operate.level"
                        size="mini"
                        @click="partOperateHandler(scope.$index, scope.row,operate)" v-for="(operate,index) in partOperate" :key="index">{{ operate.reversalText?(scope.row[operate.judge]?operate.text:operate.reversalText):operate.text }}</el-button>
                        
                    </template>
                    </el-table-column>
            
                </el-table>


            </div>
            
        </div>

          <!-- 页码 -->
          <div class="page">

            <el-pagination
            background
            :current-page="page.current?page.current:1"
            :page-sizes="[10, 20, 40, 100]"
            :page-size="page.size?page.size:10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            >
            </el-pagination>

        </div>

    </div>
  </div>
</template>

<script>


export default {
    data(){
        return{
            tableHeight:420

        }
    },
    props:['page','config','partOperate','globalOperate','searchOperate'],
    methods:{
        partOperateHandler(index, row,operate){

            this.$emit('part',index,row,operate);

        },
        globalOperateHandler(entity){
            this.$emit('global',entity)

        },
        searchOperateHandler(current,size){

           
            this.page.current=current;
            this.page.size=size;
            this.$emit('search',this.page);

        },
        handleSizeChange(size){
            this.page.size=size;
            this.searchOperateHandler(this.page.current,size);

        },
        handleCurrentChange(current){
            this.page.current=current;
            this.searchOperateHandler(current,this.page.size);
            
        },
        load(row, treeNode, resolve){
            console.log('我被触发了...')
            setTimeout(()=>{
                console.log('row',row);
                resolve(row[this.config.treeProps.children])
            },1000)
        }
        
    },
    created(){

        this.$nextTick(()=>{
            console.log('config',this.config)
            let height = this.$refs.search.offsetHeight-78;
            this.tableHeight=this.tableHeight-(height<=0?0:height);
        })
        
    }

}
</script>

<style scoped>

.table-box{
    
    background-color: #ffff;
}

.table-mian{
    display: flex;
    justify-content: center;
    border-top: 1px solid #dcdfe6;
}
.search{
    
    min-height: 80px;
    display: flex;
    justify-content: center;
    
}
.search-main{

    width: 90%;
    display: flex;
   
    justify-content: space-between;
}
.search-input{
    display: flex;
    /* justify-content: center; */
    flex-wrap: wrap;
   
    margin-top: 40px;
   

}
.search-item{
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
    margin-bottom: 20px;

    

}
.label{
   
    font-size: 14px;
    margin-right: 10px;
    
    line-height: 40px;
    text-align: left;
    

}
.search-btn-main{
    
    margin-top: 40px;
    height: 35px;
    /* width: 20%; */
    display: flex;
    justify-content: flex-end;

}

.global{
    /* margin-top: 10px; */
    margin-bottom: 10px;
    width: 100%;
    min-height: 50px;
    display: flex;
    justify-content: center;
 
}

.global-main{
    width: 90%;
    display: flex;
    justify-content: space-between;

}



.global-item-left{
    width: 50%;
    display: flex;
    justify-content: flex-start;

}
.global-item-right{
    width: 50%;
    display: flex;
    justify-content: flex-end;

}

.global-item-left-btn{
    margin-right: 10px;
}
.global-item-right-btn{
    margin-left: 10px;

}

.page{
    border-top: 1px solid #dcdfe6;
    height: 100px;
    /* line-height: 180px; */
    align-items: center;
    display: flex;
    justify-content: center;
    margin:  auto 0;
}



</style>